	$(function(){
	
	 var i = 0;
			var ul1 = document.getElementById('ul1');
			var ul2 = document.getElementById('ul2');
			var show = document.getElementById('carousel');
			var Left = document.getElementById('left');
			var Right = document.getElementById('right');
			var lis = ul2.children;
			lis[0].style.background = "#f60";
			var timer = setInterval(function(){
				i++;
				ul1.style.marginLeft = -560*i+"px";
				if(i==6){
					i = 0;
					ul1.style.transition="none";
					ul1.style.marginLeft = -560*i+"px";
					i++;
					setTimeout(function(){
						ul1.style.transition="all 1s";
						ul1.style.marginLeft = -560*i+"px";
					},10);
				}
				for(var j=0;j<lis.length;j++){
					lis[j].style.background="white";
				}
				if(i>=0&&i<=4){
					lis[i].style.background="#f60";
				}else{
					lis[0].style.background="#f60";
				}
				
			},1000)
			show.onmouseover=function(){
				clearInterval(timer);
			}
			show.onmouseout=function(){
				timer = setInterval(function(){
					i++;
					if(i==5){
						 i = 0;
					}
					for(var j=0;j<lis.length;j++){
						lis[j].style.background="white";
					}
					lis[i].style.background="#f60";
					ul1.style.marginLeft = -560*i+"px";
				},1000)
			}
			Left.onclick=function(){
				i--;
				if(i==-1){
					i = 0;
				}
				ul1.style.marginLeft = -560*i+"px";
			}
			Right.onclick=function(){
				i++;
				if(i==5){
					i = 0;
				}
				ul1.style.marginLeft = -560*i+"px";
			}
			
			for(var j=0;j<lis.length;j++){
				lis[j].index = j;
				lis[j].onclick=function(){
					var index = this.index;
					i = index;
					for(var h=0;h<lis.length;h++){
						lis[h].style.background="white";
					}
					this.style.background="#f60";
					ul1.style.marginLeft = -560*index+"px";
				}
			}
			
			
	

		var myChart = echarts.init(document.getElementById('Histogram-show'));
		// 显示标题，图例和空的坐标轴
			option = {
		    color: ['#3398DB'],
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {            
		            type: 'shadow'        
		        }
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: [
		        {
		            type: 'category',
		            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		            axisTick: {
		                alignWithLabel: true
		            }
		        }
		    ],
		    yAxis: [
		        {
		            type: 'value'
		        }
		    ],
		    series: [
		        {
		            name: '直接访问',
		            type: 'bar',
		            barWidth: '30%',
		            data: [9, 11, 13, 10, 8, 11,5]
		        }
		    ]
		};

		  
		var names = [];     //类别数组（实际用来盛放X轴坐标值）
		var nums = [];       //销量数组（实际用来盛放Y坐标值）
		 
		$.ajax({
			type : "get",
			async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
			url : "https://edu.telking.com/api/?type=week", 
			dataType : "json", 
			success : function(data) {
				//请求成功时执行该函数内容，result即为服务器返回的json对象
				if (data.code == 200) {       
					var obj = eval(data.items);     //解析后台传来的json数据
					for (var i = 0; i < obj.length; i++) {
						names.push(obj[i].name); 
					}
					for (var i = 0; i < obj.length; i++) {
						nums.push(obj[i].num);
					}
					
					myChart.setOption({ //加载数据图表
						xAxis : {
							data : names
						},
						series : [ {
							// 根据名字对应到相应的系列
							name : '销量',
							data : nums
						} ]
					});
				}else{
					alert("后台数据获取失败!");
				}
			},
			error : function(errorMsg) {
				//请求失败时执行该函数
				alert("图表请求数据失败!");
				myChart.hideLoading();
			}
		})
		 
		 myChart.setOption(option);	//失败。
		 
        //饼状图
		var myChart1 = echarts.init(document.getElementById('Piechart-show'));
		option = {
	    title: {
	       
	        left: 'center'
	    },
	    tooltip: {
	        trigger: 'item',
	       
	    },
	    series: [
	        {
	            name: '访问来源',
	            type: 'pie',
	            radius: '55%',
	            center: ['50%', '60%'],
	            data: [
	                {value: 937, name: 'Mon'},
	                {value: 136, name: 'Tue'},
	                {value: 8867, name: 'Wed'},
	                {value: 8233, name: 'Thu'},
	                {value: 1307, name: 'Fri'},
	                {value: 3017, name: 'Sat'},
	                {value: 440, name: 'Sun'}
	            ],
	            emphasis: {
	                itemStyle: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
	};
	 myChart1.setOption(option);
	 
	 
	var colors = ['#5793f3', '#d14a61', '#675bba'];
    var myChart2= echarts.init(document.getElementById('Graph-show'));
	option = {
	    color: colors,
	
	    tooltip: {
	        trigger: 'none',
	        axisPointer: {
	            type: 'cross'
	        }
	    },
	    
	    grid: {
	        top: 30,
	        bottom: 20
	    },
	    xAxis: [
	        {
	            type: 'category',
	            axisTick: {
	                alignWithLabel: true
	            },
	            axisLine: {
	                onZero: false,
	                lineStyle: {
	                    color: colors[1]
	                }
	            },
	            axisPointer: {
	                label: {
	                    formatter: function (params) {
	                        return '人数  ' + params.value
	                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
	                    }
	                }
	            },
	            data: ['06/15', '06/16', '06/17', '06/18', '06/19', '06/20', '06/21', '06/22', '06/23', '06/24', '06/25', '06/26','06/27','06/28','06/29']
	        },
	        {
	            type: 'category',
	            axisTick: {
	                alignWithLabel: true
	            },
	            axisLine: {
	                onZero: false,
	                lineStyle: {
	                    color: colors[0]
	                }
	            },
	            axisPointer: {
	                label: {
	                    formatter: function (params) {
	                        return '人数 ' + params.value
	                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
	                    }
	                }
	            }
	        }
	    ],
	    yAxis: [
	        {
	            type: 'value'
	        }
	    ],
	    series: [
	       
	        {
	            name: '人数',
	            type: 'line',
	            smooth: true,
	            data: [8094, 4564, 2955,2199, 9548, 6261, 5349, 563, 6582, 9344, 1615, 3871,8824,3020,6124]
	        }
	    ]
	};
	 myChart2.setOption(option);
	
	
	
    })	
	
	
	
	
	
	
	
	
	       